
import { Row, Col, Form, Input, Button, Select, message } from "antd"
import { useRef, useEffect, useState } from "react"
import { $http } from "../../api"
import { baseURL } from "../../api/request"
import { annoTypes } from "../../utils"
import { CloseCircleOutlined } from "@ant-design/icons"
import { observer } from "mobx-react"
import { mbdata } from "../../mobx/data"
const { Option } = Select



function AnnoAdd({ history }) {
  const [desc, setDesc] = useState(null)

  useEffect(() => {


  }, [])

  const onFinish = (value) => {
    $http.annoadd({
      ...value,
      author: mbdata.userInfo.account,
      avatar: mbdata.userInfo.avatar

    })
      .then(res => {
        if (res.code == 200) {
          history.push("/main/anno/list")
        }
      })
  }
  const onFailed = (error) => {
    message.error("请先填写公告信息")
  }
  const form = useRef()
  const file = useRef()
  const clickUpload = () => {
    var filedata = file.current.files[0]
    var data = new FormData()
    data.append("file", filedata)

    $http.uploadimg(data)
      .then(res => {
        if (res.code == 200) {
          // console.log(form.current);
          form.current.setFieldsValue({
            desc: res.path
          })
          setDesc(res.path)
        }
      })
  }
  const startUpload = () => {
    file.current.click()
  }

  const delDesc = () => {
    setDesc(null)
    form.current.setFieldsValue({
      desc: ""
    })
  }
  return (
    <div>
      <h2> 添加公告</h2>
      <Row className="" style={{ marginTop: 20 }}>
        <Col className="" span={12}>

          <Form
            name="normal_login"
            className="login-form"
            initialValues={{    // 设置表单的初始值
              password: "abc123"
            }}
            onFinish={onFinish}
            onFinishFailed={onFailed}
            ref={form}
            layout={"vertical"}
            style={{ maxWidth: 240 }}
          >
            <Form.Item
              name="title"
              label="公告名称"
              rules={[
                {
                  required: true,
                  message: '请输入公告名称',
                },
              ]}
            >
              <Input placeholder="请输入公告名称" />
            </Form.Item>

            <Form.Item
              name="content"
              label="公告内容"
              rules={[
                {
                  required: true,
                  message: '请输入公告内容',
                }
              ]}
            >
              <Input.TextArea placeholder="请输入公告内容" />
            </Form.Item>


            <Form.Item
              name="type"
              label="公告级别"
              rules={[
                {
                  required: true,
                  message: '请选择',
                }
              ]}
            >
              <Select placeholder="请选择" style={{ width: '100%' }} >
                {
                  annoTypes.map((l, i) => {
                    return (
                      <Option key={i} value={l.value} > {l.text}</Option>
                    )
                  })
                }
              </Select>
            </Form.Item>




            <Form.Item
              name="desc"
              label="公告描述"
              rules={[
                {
                  required: true,
                  message: '请上传图片',
                }
              ]}
            >
              <input type="file" onChange={clickUpload} ref={file} style={{ display: "none" }}></input>
              <div className="imgbox" >
                {
                  desc ?
                    <div style={{ position: 'relative', width: 180, height: 150 }}>
                      <img src={desc.replace(/public/, baseURL)} alt="" style={{ width: 180, height: 150, borderRadius: 10 }} />
                      <i onClick={delDesc} style={{ color: "#fff", position: "absolute", top: 20, right: 10, cursor: "pointer" }} >
                        <CloseCircleOutlined />
                      </i>
                    </div>
                    :
                    <Button onClick={startUpload} type="primary">点击上传图片</Button>
                }
              </div>
            </Form.Item>

            <Form.Item
            >
              <Button block type="danger" htmlType="submit" >添加公告</Button>
            </Form.Item>

          </Form>
        </Col>
      </Row>
    </div>
  )
}

export default observer(AnnoAdd)